<template>
  <view class="shop-container" v-if="cart.length!==0">
    <!-- 购物车标题部分 -->
    <view class="cart-slogan">
      <uni-icons type="shop" size="20"></uni-icons>
      <text>军校广场惠友超市</text>
      <uni-tag text="标签" type="success"></uni-tag>
      <uni-tag text="标签" type="warning"></uni-tag>
    </view>
		<my-address></my-address>
    <!-- 购物车数据列表部分 -->
    <view class="goods-list">
      <uni-swipe-action v-for="(goodItem, goodIndex) in cart" :key="goodIndex">
        <uni-swipe-action-item :right-options="options" @click="delGood(goodItem)">
        <view class="goods-item">
          <view class="goods-left">
            <radio class="good-check" :checked="goodItem.goods_state" @click="radioHandle(goodItem)"/>
            <image :src="goodItem.goods_small_logo" class="goods-pic"></image>
          </view>
          <view class="goods-info">
            <view>{{goodItem.goods_name}}</view>
            <view class="price">
              <view>{{goodItem.goods_price | handlePrice}}</view>
              <view @click="saveGoodId(goodItem)">
                <uni-number-box class="goods-mange" :min="0" :value="goodItem.goods_count" @change="changeHandle"></uni-number-box>
              </view>
            </view>
          </view>
        </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <my-settle></my-settle>
  </view>
  <!-- 空白购物车结构 -->
  <view class="empty-container" v-else>
    <img src="https://oss.suning.com/vss/activity/wximg/cart/sn-cart-empty.png" alt="">
    <text>购物车还是空的，快来挑选好货吧</text>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  data() {
    return {
      // 初始化商品goods_id
      goodId: 0,
      // 滑动删除的选项
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('m_cart', ['cart']),
    ...mapGetters('m_cart', ['total'])
  },
  filters: {
    handlePrice: function (num) {
      return '¥' + num.toFixed(1);
    }
  },
  created() {
    this.$store.dispatch('m_cart/loadCartFromStorage');
  },
  onShow() {
    this.setBadge();
  },
  methods: {
    ...mapMutations('m_cart', ['updateState', 'updateGoodsNum', 'delGoodsHandle']),
    setBadge() {
      uni.setTabBarBadge({
        index: 2,
        text: this.total + ''
      });
    },
    // 单选框的单击事件
    radioHandle(item) {
      let obj = {
        goods_id: item.goods_id,
        goods_state: !item.goods_state
      };
      this.updateState(obj);
    },
    // 保存当前商品的 goods_id
    saveGoodId(cartItem) {
      this.goodId = cartItem.goods_id;
    },
    // 数量输入框的更改事件
    changeHandle(e) {
      let obj = {
        goods_id: this.goodId,
        goods_count: e
      };
      this.updateGoodsNum(obj);
      // 重新调用一次 setBadge
      this.setBadge();
    },
    // 删除购物车中的商品
    delGood(goods) {
      this.delGoodsHandle(goods);
      // 重新调用一次 setBadge
      this.setBadge();
    }
  }
};
</script>

<style lang="scss">
.cart-slogan {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  text {
    margin: 0 10rpx;
  }
}

.goods-list {
  background-color: #fff;
  .goods-item {
    width: 100%;
    height: 220rpx;
    margin-bottom: 10rpx;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    .goods-left {
      width: 240rpx;
      height: 220rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .goods-pic {
        display: block;
        width: 200rpx;
        height: 200rpx;
        margin-right: 10rpx;
      }
    }
    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .price {
        color: #FF5A5F;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.shop-container{
  padding-bottom:80rpx;
}
.empty-container{
  width:100%;
  padding-top:300rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
    width: 50%;
    height: 350rpx;
  }
}

</style>
